<template>
    <div :style="{ width: '100%', height: chartHeight }" ref="chart"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'BarChart',
        props: {
            chartData: {
                type: Object,
                required: true
            },
            title: {
                type: String,
                default: '柱状图示例'
            },
            height: {
                type: String,
                default: '400px'
            },
            truth: {
                type: Number // 假设 truth 为某个横坐标的值
            }
        },
        data() {
            return {
                chartInstance: ''
            }
        },
        watch: {
            // 监听 chartData 变化
            chartData: {
                handler(newVal, oldVal) {
                    // 当 chartData 发生变化时，重新初始化图表
                    this.initChart();
                },
                deep: true // 深度监听，用于监听对象或数组内部的变化
            },
        },
        computed: {
            chartHeight() {
                return this.height;
            }
        },
        mounted() {
            this.initChart();
        },
        methods: {
            initChart() {
                const existingChart = echarts.getInstanceByDom(this.$refs.chart);
                if (existingChart) {
                    existingChart.dispose(); // 销毁已有实例
                }

                const chart = echarts.init(this.$refs.chart);
                const { labels, data } = this.processData(this.chartData, this.title);
                const maxIndex = data.indexOf(Math.max(...data));
                const colors = data.map((item, index) => {
                    const numericLabel = parseInt(labels[index]);
                    if (index === maxIndex && parseInt(this.truth) === numericLabel) {
                        return {
                            color: '#F4CE14', //黄色
                        };
                    } else if (parseInt(this.truth) === numericLabel) {
                        return {
                            color: '#EED3D9', //粉色
                        };
                    } else {
                        // 其他情况为带有绿色边框的白色填充
                        return {
                            color: '#495E57', //墨绿
                        };
                    }
                });

                console.log(this.truth)
                console.log(maxIndex)
                console.log({labels,data})

                const options = {
                    title: {
                        text: this.title
                    },
                    tooltip: {},
                    xAxis: {
                        data: labels, // 将字符串标签转换为整数
                    },
                    yAxis: {
                        show: false  // 隐藏纵坐标轴
                    },
                    grid: {
                        top: 40,
                        bottom: 20,
                        left: 10,
                        right: 10
                    },
                    series: [{
                        name: '概率',
                        type: 'bar',
                        data: data.map((item, index) => ({ value: item, itemStyle: colors[index] })),
                        barBorderRadius: [0, 0, 0, 0], // 可根据需要调整圆角
                    }]
                };

                chart.setOption(options);

                this.chartInstance = chart;
            },
            processData(dataObj, title) {

                let labels = Object.keys(dataObj).sort((a, b) => parseInt(a) - parseInt(b));
                if (title[0] == 's') {
                    labels = labels.filter(label => {
                        const numericLabel = parseInt(label);
                        return numericLabel >= -3 && numericLabel <= 3;
                    });
                }

                // 根据截断后的 labels 提取对应的 data 值
                const data = labels.map(label => dataObj[label]);

                return { labels, data };
            }
        },
        beforeUnmount() {
            if (this.chartInstance) {
                this.chartInstance.dispose();
            }
        }
    };
</script>

<style scoped></style>
